import 'dart:io';

import 'package:adb_tool/base/base_page_state.dart';
import 'package:adb_tool/widgets/image_detail_dialog.dart';
import 'package:desktop_drop/desktop_drop.dart';
import 'package:flutter/material.dart';

import '../../common/selector_plus.dart';
import 'media_management_view_model.dart';
import 'media_model.dart';

class MediaManagementPage extends StatefulWidget {
  String deviceId;
  String packageName;

  MediaManagementPage({Key? key, required this.deviceId, required this.packageName}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _MediaManagementPageState();
  }
}

class _MediaManagementPageState extends BasePageState<MediaManagementPage, MediaManagementViewModel> {
  @override
  void initState() {
    super.initState();
    viewModel.init();
  }

  @override
  buildContentView(BuildContext context) {
    return Container(
      child: DropTarget(
        child: SelectorListPlus<MediaManagementViewModel, MediaModel>(
          selector: viewModel.files,
          builder: (context, value, child) {
            return Container(
              margin: const EdgeInsets.symmetric(horizontal: 12,vertical: 12),
              child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    mainAxisSpacing: 8,
                    crossAxisCount: 4,
                    mainAxisExtent: 200,
                    childAspectRatio: 0.1,
                    crossAxisSpacing: 8.0),
                itemCount: value.length,
                itemBuilder: (context, index) {
                  return itemView(value[index], index);
                },
              ),
            );
          },
        ),
      ),
    );
  }

  @override
  createViewModel() => MediaManagementViewModel(context, widget.deviceId, widget.packageName);

  itemView(MediaModel value, int index) {
    return InkWell(
      child: Container(
        child: Image.file(
          File(value.path),
          fit: BoxFit.contain,
        ),
      ),
      onTap: () {
        showImageDetail(context: context, url: value.path);
      },
    );
  }
}
